<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title>
    <!-- 引入layui的核心样式库-->
    <link rel="stylesheet" href="res/layui/css/layui.css">
</head>
<body>

<h2>按钮</h2>
<hr>
<div class="layui-btn-container">
    <button class="layui-btn layui-bg-green">普通按钮</button>
    <button class="layui-btn layui-bg-blue">蓝色按钮</button>
    <button class="layui-btn layui-bg-orange">橙色按钮</button>
    <button class="layui-btn layui-bg-red">红色按钮</button>
    <button class="layui-btn layui-bg-purple">紫色按钮</button>
    <button class="layui-btn layui-bg-black">黑色按钮</button>
    <button class="layui-btn layui-bg-gray">灰色按钮</button>
    <button class="layui-btn layui-bg-cyan">青色按钮</button>
    <button class="layui-btn layui-btn-disabled">禁用按钮</button>
</div>
<hr>
<button class="layui-btn layui-btn-lg">大型按钮</button>
<button class="layui-btn">普通按钮</button>
<button class="layui-btn layui-btn-sm">小型按钮</button>
<button class="layui-btn layui-btn-xs">超小按钮</button>
<hr>
<div style="width: 400px">
    <button class="layui-btn layui-btn-fluid layui-btn-radius layui-btn-primary layui-border-blue">流体按钮</button>
</div>
<hr>
<div class="layui-btn-group">
    <button class="layui-btn layui-bg-blue layui-btn-sm">
        <i class="layui-icon layui-icon-about"></i>
        详情
    </button>
    <button class="layui-btn layui-bg-orange layui-btn-sm">
        <i class="layui-icon layui-icon-edit"></i>
        修改
    </button>
    <button class="layui-btn layui-bg-red layui-btn-sm">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
</div>

<h2>字体图标</h2>
<i class="layui-icon layui-icon-github" style="font-size: 20em"></i>
<i class="layui-icon layui-icon-login-wechat" style="font-size: 20em;color:#0f0"></i>
<i class="layui-icon layui-icon-login-weibo" style="font-size: 20em;color:#f00"></i>

<h2>表格</h2>
<div class="layui-col-md6 layui-col-md-offset3 layui-col-sm8 layui-col-sm-offset2 layui-col-xs12">
    <table class="layui-table" lay-even lay-skin="nob">
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
            <th>表头4</th>
            <th>表头5</th>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
    </table>
</div>

<!--layui的核心组件库-->
<script src="res/layui/layui.js"></script>
<script>
    layui.use(function(){
        //加载layui弹层模块
        let layer = layui.layer;
        // layer.msg('Hello Layui!')
        // layer.alert('Hello Layui!');
        // layer.confirm('是否确认删除？',{icon:3},function(index){
        //     //点击确定按钮，index的值为1
        //     layer.msg('删除成功---'+index);
        // })
    })
</script>
</body>
</html>